<template>
  <li class="parent-li root-qy">
    <a class="toggle" href="#">
      <label>{{rootItem.uumsFunction.functionName}}</label>
    </a>
    <ul @click.stop="showLeaf">
      <li :showLeaf="showLeafCom" :is="dirHtml" v-if="dirHTMLData !== '' && showDir" v-for="(dirItem,k) in dirHTMLData" :dirItem="dirItem" :uapMenuVos="uapMenuVos" :key="k"></li>
    </ul>
  </li>
</template>

<script>
  import {getFarther} from '../../../../utils/utils'
  import dirHtml from './dirHtml'
    export default {
      name: "custom-menu-setting-item",
      props:['rootItem','uapMenuVos','showDir'],
      data(){
        return {
          dirHtml:dirHtml,
          dirHTMLData:'',
          showLeafCom:[]
        }
      },
      mounted(){
        if(this.uapMenuVos !== ''){
          this.dirHTMLData = [];
          for(let i = 0;i<this.uapMenuVos.length;++i){
            if(this.uapMenuVos[i].uumsFunction.parentFunction === this.rootItem.uumsFunction.functionCode){
              this.dirHTMLData.push(this.uapMenuVos[i]);
              this.showLeafCom.push(false);
            }
          }
        }
      },
      methods:{
        showLeaf(e){
          let dom = getFarther('dir-qy',e.target);
          if(dom.classList.contains('active')){
            dom.classList.remove('active')
          }else{
            let firstLi = document.querySelectorAll('.setMenu-qy>ul>.root-qy .dir-qy');
            for(let i = 0;i < firstLi.length;++i){
              firstLi[i].classList.remove('active');
            }
            this.showLeafCom.splice(dom.k,1,true);
            this.$nextTick(()=>{
              	dom.classList.add('active');
              	let doms = dom.querySelectorAll('.root-qy');
                for(let i = 0;i < doms.length;++i){
          				doms[i].k = i;
          			}
              });
//          this.showLeafCom = true;
//          dom.classList.add('active')
          }
        }
      }
    }
</script>

<style scoped>

</style>
